<template>
    <div class="app-container">
        <el-table border :data="tableData" v-loading="loading" size="small">
          <el-table-column
            type="selection"
            width="55" align="center"/>
          <el-table-column type="index">
          </el-table-column>
          <el-table-column label="标题" prop="title" />
          <el-table-column label="作者" prop="author" width="100px" />
          <el-table-column label="状态" width="90px">
            <template slot-scope="scope">
              <span v-if="scope.row.status == 1"><el-button size="mini" type="success">已发布</el-button></span>
              <span v-if="scope.row.status == 2"><el-button size="mini" type="warning">草稿</el-button></span>
            </template>
          </el-table-column>
          <el-table-column  label="阅读量" prop="pageView" width="100px"></el-table-column>
          <el-table-column  label="重要性" width="150px">
            <template slot-scope="scope">
              <el-rate
                v-model="scope.row.importance"
                disabled show-score score-template="{value}">
              </el-rate>
            </template>
          </el-table-column>
          <el-table-column label="发布时间" prop="publicTime" />
        </el-table>
      <div class="page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>

    </div>
</template>

<script>
import {getList} from '@/api/blog'
import axios from 'axios'
    export default {
        name: 'HelloWorld',
        data() {
            return {
                msg: 'Welcome to Your Vue.js App',
                tableData:[

                ],
              loading:true,
              currentPage:1,
              total:0,
              size:10,
              params:{}
            }
        },
      methods: {
          //填充数据
        fetchData() {
          this.loading = true;
          getList(this.currentPage,this.size,this.params).then(response => {
            this.loading = false;
            this.tableData = response.data.records;
            this.currentPage = Number(response.data.current);
            this.total = Number(response.data.total);
            this.size = Number(response.data.size);
          });
        },
        //pageSize 改变时会触发
        handleSizeChange (size) {
          this.size = size;
          this.fetchData();
        },
        //currentPage 改变时会触发
        handleCurrentChange (currentPage) {
          this.currentPage = currentPage;
          this.fetchData();
        }

      },
      created () {
        this.fetchData();
      }
    }
</script>
<style scoped>
  .page {
    margin-top: 20px;
  }
</style>
